<template>
	<view class="goods mt-20 b-24 ph-24 pb-32 pt-12">
		<view class="f jc-c">
			<view class="w-300">
				<u-tabs :list="typeList" @click="changeType" lineColor="#FABB3D"
					:inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
					:activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
					:itemStyle="{ width: '50%', height: '80rpx' }"></u-tabs>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="recommend mt-32" v-show="type === 0">
			<view class="f jc-s-b mt-20">
				<view class="mr-16">
					<view v-for="(item, index) in listL" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16"
						@click="toDetail(item)">
						<image :src="item.picUrl" class="w-319 b-24" mode="widthFix"></image>
						<view class="ph-12">
							<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
							<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }}</view>
						</view>
					</view>
				</view>
				<view>
					<view v-for="(item, index) in listR" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16"
						@click="toDetail(item)">
						<image :src="item.picUrl" class="w-319 b-24" mode="widthFix"></image>
						<view class="ph-12">
							<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
							<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="w-f h-72 b-36 fs-26 fw-600 text-color mt-32 btn f ai-c jc-c" @click="moreGoods"
				v-show="goodsTotal > goodsLength">查看更多商品</view>
		</view>
		<!-- 服务 -->
		<view class="mt-12" v-show="type === 1">
			<u-scroll-list :indicator="false" class="h-72 f ai-c">
				<view v-for="(item, index) in statusList" :key="index"
					class="h-48 ph-16 b-48 mr-24 status fs-24 text-color4 f ai-c" @click="changeStatus(index,item.id)"
					:class="status == index ? 'active' : ''">
					{{ item.name }}
				</view>
			</u-scroll-list>
			<view class="f ai-c jc-s-b list pv-32" v-for="(item, index) in serviceList" :key="index" @click="toDetail2(item)">
				<image :src="item.picUrls" class="w-160 h-160 b-24 mr-20"></image>
				<view class="f f1 fd-c">
					<view class="fs-28 fw-600 text-color4">{{ item.name }}</view>
					<view class="f mt-12 ai-c">
						<!--                        <view class="w-32 h-28 fs-20 text-color5 f ai-c jc-c mr-8 favour">惠</view>-->
						<view class="fs-26 fw-600 text-color7 mr-8">¥{{item.price}}</view>
						<!--                        <view class="w-44 h-28 b-4 fs-20 text-color8 discount">5折</view>-->
						<!--                        <view class="fs-26 text-color3 old-price">¥{{item.price}}</view>-->
					</view>
					<view class="mt-20 f ai-c jc-s-b">
						<view class="fs-22 text-color3">年售{{item.salesCount}}+</view>
						<view class="w-144 h-56 b-56 f ai-c jc-c fs-26 text-color reservation">立即预约</view>
					</view>
				</view>
			</view>
			<!-- <view class="w-f h-72 b-36 fs-26 fw-600 text-color mt-32 btn f ai-c jc-c" @click="moreService">查看更多服务</view> -->
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, toRefs, watch } from 'vue';
	import { spuPage, categoryTopList } from '@/services/api/shop/index';
	import { servicePage } from '@/services/api/serve/index';
	const type = ref(0);
	const status = ref(0);
	const listL = ref<any[]>([]);
	const listR = ref<any[]>([]);
	const serviceList = ref<any[]>([]);
	const serviceTotal = ref<any[]>([]);
	const goodsTotal = ref(0);
	const goodsLength = ref(0);
	const props = defineProps({
		id: {
			type: String,
		},
	});
	const statusList = ref([
		{
			id: 0,
			name: '全部',
		}
	]);
	const { id } = toRefs(props);
	const queryParams = ref<any>({
		type: 0,
		sortAsc: true,
		pageNo: 1,
		pageSize: 10,
		storeId: '',
	});
	const serviceParams = ref<any>({
		pageNo: 1,
		pageSize: 10,
		sortField: 'favorable',
		sortAsc: false

	});
	watch(
		() => [id?.value],
		() => {
			queryParams.value.storeId = id?.value;
			serviceParams.value.storeId = id?.value;
			listL.value = [];
			listR.value = [];
			getSpuPage();
			getClassify();
			// getServicePage();
		}
	);
	const toDetail = (data : any) => {
		uni.redirectTo({
			url: `/pages_shop/productDetails/index?status=shop&id=${data.id}`,
		});
	};
	const toDetail2 = (data : any) => {
		uni.redirectTo({
			url: `/pages_serve/productDetails/index?status=shop&id=${data.id}`,
		});
	};
	//获取服务分类
	async function getClassify() {
		const res = await categoryTopList({ type: 1 });
		statusList.value = statusList.value.concat(res.data)
	}
	//获取服务商品
	async function getServicePage() {
		const { data } = await servicePage(serviceParams.value);
		data.list.forEach((item : any, index : number) => {
			if (item.picUrls.length > 0) {
				item.picUrls = item.picUrls[0]
			}


		});
		serviceList.value = data.list;
		serviceTotal.value = data.total;
	}
	//更多服务
	function moreService() {
		serviceParams.value.pageNo++;
		getServicePage();
	}
	//获取商品
	async function getSpuPage() {
		const { data } = await spuPage(queryParams.value);
		if (data.list.length > 0) {
			data.list.forEach((item : any, index : number) => {
				let list = item.picUrl.split(',')
				item.picUrl = list[0]
				if (index % 2 === 0) {
					listL.value.push(item);
				} else {
					listR.value.push(item);
				}
			});
			goodsTotal.value = data.total;
			goodsLength.value = listL.value.length + listR.value.length;
		}
	}
	function moreGoods() {
		queryParams.value.pageNo++; 
		getSpuPage();
	}
	const typeList = [
		{
			name: '优惠',
		},
		{
			name: '服务',
		},
	];


	const changeType = (data : any) => {
		type.value = data.index;
		goodsTotal.value = 0
		goodsLength.value = 0
		listL.value = []
		listR.value = []
		if (data.index == 0) {
			getSpuPage()
		} else {
			getServicePage()
		}
	};

	const changeStatus = (data : number, id : number) => {
		status.value = data;
		if (data == 0) {
			delete serviceParams.value.firstCategoryId
		} else {
			serviceParams.value.firstCategoryId = id
		}

		getServicePage()
	};
</script>
<style lang="scss" scoped>
	.goods {
		background: #ffffff;

		.btn {
			background: #faf5e6;
		}

		.list {
			border-bottom: 1px solid #f0f0f0;
		}

		.list:last-child {
			border-bottom: none;
		}

		.reservation {
			border: 1rpx solid #fabb3c;
		}

		.discount {
			background: #fff5f5;
		}

		.favour {
			background: #f54040;
		}

		.old-price {
			text-decoration: line-through;
		}

		.active {
			background: #faf5e6;
			border-radius: 4rpx;
			color: #fabb3c;
		}

		.status {
			background: #f5f5f5;
		}

		.box {
			background: #f5f5f5;
		}
	}
</style>